<template>
  <div class="home">
    <breadcrumb-view />

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="关联副表" name="first">
        <make-table v-if="activeName == 'first'" />
      </el-tab-pane>
      <el-tab-pane label="展示字段" name="second">
        <show-text v-if="activeName == 'second'" />
      </el-tab-pane>
      <el-tab-pane label="排序字段" name="third">
        <sort-table v-if="activeName == 'third'" />
      </el-tab-pane>
      <el-tab-pane label="过滤字段" name="fourth">
        <filte-table v-if="activeName == 'fourth'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { api } from "../server/api";
import makeTable from "./makeTable.vue";
import showText from "./showText.vue";
import sortTable from "./sortTable.vue";
import breadcrumbView from "../components/breadcrumbView";
import filteTable from "./filteTable.vue";
export default {
  data() {
    return {
      tableData: [],
      joinTableData: [],
      fieldLst: [],
      activeName: "first",
    };
  },
  components: {
    makeTable,
    showText,
    sortTable,
    filteTable,
    breadcrumbView,
  },
  created() {
    this.getList();
  },
  methods: {
    handleClick() {},
    getList() {
      api.stdappTbls4Join().then((res) => {
        this.tableData = res;
      });
    },
    joinViceTable(row) {
      // this.dialogVisible = true;
      const { tableId } = row;
      this.$router.push({
        name: "makeTable",
        query: {
          tableId,
        },
      });
    },
    showViceTable(row) {
      // this.dialogVisible = true;
      const { tableId } = row;
      this.$router.push({
        name: "showText",
        query: {
          tableId,
        },
      });
    },
    sortViceTable(row) {
      // this.dialogVisible = true;
      const { tableId } = row;
      this.$router.push({
        name: "sortTable",
        query: {
          tableId,
        },
      });
    },
    filterViceTable(row) {
      // this.dialogVisible = true;
      const { tableId } = row;
      this.$router.push({
        name: "filteTable",
        query: {
          tableId,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  .d-logo-wrapper {
    display: flex;
    align-items: center;
    padding: 0 20px;
    cursor: pointer;
  }
  .header {
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
  }
  .el-tabs {
    padding: 0 20px;
    background-color: #fff;
    box-sizing: border-box;
    // height: calc(100% - 60px);
  }
}
</style>